<template>
  <!-- 用于测试滚动条 可删除 -->
  <div class="picture">
    
    <div v-for="(ever, i) in props.data" class="picture-item">
      <div class="file_img_all">
        <div class="img_l picture-item-box" v-if="!!ever.label" >

          <image class="color_image_class" :src="ever.color_image"/>
          <span class="picture-item-title">{{ ever.label }}</span>
        </div>
        <div class="img_r">
          <div class="picture-item-box">
        <uploadPic :ref="(el: refItem) => handleSetInputMap(el, ever.value)" :refname="inputRefMap[`imgRef_${ever.value}`]" v-bind="uploadDataOne" v-model="fileArr">
        </uploadPic>
        <div v-if="props.valid && ever.value === 0" class="mask" @click="ElMessage.warning('请选择企发颜色')"></div>
      </div>
        </div>

      </div>




      
     
    </div>

    <!-- <div @click="save()">获取数据</div> -->
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watchEffect } from "vue";

import { ElMessage } from "element-plus";

import uploadPic from "@/components/uploadFileMerak/picUpload.vue";

const props = withDefaults(
  defineProps<{
    data: any;
    valid: boolean;
  }>(),
  {
    data: () => [{ value: 0 }]
  }
);

const inputRefMap = ref({});
const handleSetInputMap = (el: refItem, item: number) => {
  if (el) {
    inputRefMap.value[`imgRef_${item}`] = el;
  }
};

const getUploadDataFun = (item: number) => {
  // 调用该控件下的方法 .addRow()
  console.log(item);
  console.log(inputRefMap.value[`imgRef_${item}`]);
};

const postimgAll = ref();

const uploadDataOne = reactive({
  path: "/goods-archive/product-edit/upload-thumbnails",
  imageType: "squire",
  imageProps: { minWidth: 800, maxWidth: 1000 },
  tipMsg: "建议尺寸：800*800像素，支持jpg、webp、png格式",
  toastBool:true
});

const ref1 = ref();
const fileArr = ref([]);
const save = () => {
  // nextTick(
  //    ()=>{
  //     console.log("获取数据")
  // console.log(props.data)

  // console.log(ref1.value)
  // console.log(  ref1.value?.getUploadData())
  //    }

  // )

  var postimg = [];
  for (let index = 0; index < props.data.length; index++) {
    const element = props.data[index];
    const uploadData = inputRefMap.value[`imgRef_${element.value}`].getUploadData();
    if (uploadData.length === 0) {
      continue;
    }
    var _obj = {};
    _obj[element.value] = uploadData;

    postimg.push(_obj);
  }

  postimgAll.value = postimg;
  console.log(postimgAll.value);
  return Promise.resolve(postimgAll.value);
  // postimgAll.value = '123'
};

watchEffect(() => {
  console.log(props.data);
});

defineExpose({
  getImgsData: save,
  reset: () => (fileArr.value = [])
});
</script>

<style scoped lang="scss">
.color_image_class{
  width:20px;
  height:20px;
  background:var(--el-color-primary-light-5);
  border:1px solid #e6e6ee;
  margin-right:8px;

}
.file_img_all{
  display:flex;
}
.img_l.picture-item-box{
  width:148px;
  display: flex;
    justify-content: left;
    align-items: center;
   
    border-right:0;
    margin-top:0;
    background:#f8f9fa;

}
.img_r .picture-item-box{
  margin-top:0;
  border-left:0;

}
.img_l .picture-item-title{
  font-size:15px;
}
.img_r{
  flex:1;
}
.picture-item {
  margin-top:0;

  &:not(:first-child) {
    margin-top: var(--merak-padding);
  }
  &-title {
    color: #646567;
    font-size: 12px;
  }
  &-box {
    position: relative;
    margin-top: var(--merak-space);
    padding: var(--merak-padding);
    border: 1px dashed #e6e6ee;
    border-radius: var(--merak-rounded);
    :deep(.upload_table:first-child) {
      margin-left: 0;
    }
    .mask {
      position: absolute;
      top: 20px;
      width: 148px;
      height: 148px;
      cursor: pointer;
    }
  }
}
.picture{

}
</style>
<style>
.picture .picture-item{
margin-top:0 !important;
border-bottom:0!important;
margin-bottom:5px;
}

</style>
